<template>
	<view class="container">
		<view class="top">
			<u-search placeholder="名字/手机号" v-model="params.value" shape="square" :show-action="false" @input="handleInput"></u-search>
		</view>
		<scroll-view class="list" @scrolltolower="handleReachBottom" scroll-y>
			<navigator v-if="list.length" :url="`/subpackage/my/personnel/personInfo?userId=${item.userId}`" class="list-item" v-for="item in list" hover-class="none">
				<view class="avatar">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="name">
						{{item.name}}
					</view>
					<view class="phone">
						{{item.phone}}
					</view>
				</view>
			</navigator>
			<u-empty v-else text="暂无数据" mode="list"></u-empty>
		</scroll-view>
	</view>

</template>

<script setup>
	import {reactive, ref} from "vue"
	import {onReachBottom,onLoad} from "@dcloudio/uni-app"
	import personnelApi from "@/api/personnel"
	const params = reactive({
		value:"",
		pageNo:1,
		pageSize:10
	})
	let totalPage = 1
	const list = ref([])
	const handleInput = (e)=>{
		params.pageNo = 1
		getData()
	}
	const handleReachBottom = ()=>{
		if(params.pageNo>=totalPage) return
		params.pageNo++
		getData()
	}
	const getData = async ()=>{
		const {data} = await personnelApi.getPersonnelList(params)
		list.value = params.pageNo==1?data.list:unref(list).concat(data.list)
		totalPage = data.totalPage
	}
	onLoad(()=>{
		getData()
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #E5F1FB !important;
		height: 100vh;
		box-sizing: border-box;
		.top {
			height: 17vh;
			box-sizing: border-box;
			background-color: #77A9FE;
			padding: 40rpx 20rpx;
		}
		.list{
			background-color: white;
			width: 96vw;
			margin: -100rpx auto 0;
			z-index: 9099;
			height: 85vh;
			box-sizing: border-box;
			border-radius: 20rpx;
			padding: 20rpx;
			overflow: auto;
			.list-item{
				padding: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.avatar{
					image{
						height: 100rpx;
						width: 100rpx;
						border-radius: 50%;
					}
				}
				.info{
					.name{
						font-size: 30rpx;
						color: #828282;
						margin-bottom: 10rpx;
					}
					text-align: end;
				}
			}
		}
	}

</style>
